<template>  
  <div>  
       <x-header title="推荐" :right-options="{showMore: true}" @on-click-more="show = true"></x-header> 



      <div class="my_team">
        <span>我推荐的会员</span>
        <div class="my_team_img"><img src="static/bottom/xyz.png"  alt=""></div>
      </div> 

      <div class="paihang_div">
          <div class="top_li">
                <flexbox>
                  <flexbox-item><div class="flex-demo">
                      <div class="dengji_div">
                        <span>
                          等级
                        </span>
                      </div>
                    </div></flexbox-item>
                  <flexbox-item><div class="flex-demo">
                      <div class="renshu_div">
                        <span>
                          人数
                        </span>
                      </div>
                    </div></flexbox-item>
                  <flexbox-item><div class="flex-demo">
                      <div class="baifenbi_div">
                        <span>
                          现金分成百分比
                          <img src="static/bottom/fenchengshuoming.png" alt="">
                        </span>
                      </div>
                    </div></flexbox-item>
                </flexbox>
          </div> 

          <div class="bottom_li">
                  <flexbox>
                    <flexbox-item>
                      <div class="flex-demo ">
                        <div class="wode_div">
                          <img src="static/bottom/wode.png" alt="">
                          <div> 我的</div>
                        </div>
                      </div>
                    </flexbox-item>
                    <flexbox-item>
                      <div class="flex-demo">
                        <div class="num_div"><span>333人</span></div>
                        
                      </div>
                      </flexbox-item>
                    <flexbox-item><div class="flex-demo">
                      <div class="num_left_div"><span>10%</span></div>
                      </div></flexbox-item>
                  </flexbox>
          </div>   
          <div class="bottom_li">
                  <flexbox>
                    <flexbox-item>
                      <div class="flex-demo ">
                        <div class="wode_div">
                          <img src="static/bottom/wode.png" alt="">
                          <div> 我的</div>
                        </div>
                      </div>
                    </flexbox-item>
                    <flexbox-item>
                      <div class="flex-demo">
                        <div class="num_div"><span>333人</span></div>
                        
                      </div>
                      </flexbox-item>
                    <flexbox-item><div class="flex-demo">
                      <div class="num_left_div"><span>10%</span></div>
                      </div></flexbox-item>
                  </flexbox>
          </div> 
          <div class="bottom_li">
                  <flexbox>
                    <flexbox-item>
                      <div class="flex-demo ">
                        <div class="wode_div">
                          <img src="static/bottom/wode.png" alt="">
                          <div> 我的</div>
                        </div>
                      </div>
                    </flexbox-item>
                    <flexbox-item>
                      <div class="flex-demo">
                        <div class="num_div"><span>333人</span></div>
                        
                      </div>
                      </flexbox-item>
                    <flexbox-item><div class="flex-demo">
                      <div class="num_left_div"><span>10%</span></div>
                      </div></flexbox-item>
                  </flexbox>
          </div> 
      </div>

          <!-- 分享 -->
    <div v-transfer-dom>
      <x-dialog v-model="show" class="dialog-demo">
        <div class="img-box">
          <img src="static/bottom/wode.png" style="max-width:100%">
        </div>
        <div @click="show=false">
          <span class="vux-close">x</span>
        </div>
      </x-dialog>
    </div>

  </div>  
</template>  


<style>
.flex-demo {
  text-align: center;
  color: #666666;
  border-radius: 4px;
  background-clip: padding-box;
}
  .my_team{
    height: 2.125rem;
    margin-top: .75rem;
    padding-left:calc(50% - 2.6rem); 
    font-size:.8125rem;
     color: #666666;
    line-height: 2.125rem;
    background: #ffffff;
  }
  .my_team_img{
      float: right;
     
  }
  .my_team_img img{
      width: .8125rem;
      height: .4375rem;
      margin-right: .6875rem;
  }
  .paihang_div{
    width: 100%;
    height: 25.0625rem;
    background: #E6E6E6;
    border-radius:0px 0px 10px 10px; 
  }
  .top_li{
    /* background: greenyellow; */
    height: 2.5rem;
    line-height: 2.5rem;
  }
  .dengji_div{
    margin-left: 0.625rem;
  }
  .bottom_li{
    height: 3.8125rem;
    background: #ffffff;
    border-radius:5px;
    margin: 5px 5px 0px 5px; 
  }
    .wode_div{
    margin-top: .5375rem;
    font-size: .5625rem;
    color: #666666;
  }
  .wode_div img{
    width: 1.25rem;
  }
  .num_div,.num_left_div{
    font-size: .75rem;
    line-height:3.3125rem ;
  }
</style>

<script>
import { XHeader, Flexbox, FlexboxItem, Divider, XDialog, XButton, Group, XSwitch, TransferDomDirective as TransferDom } from 'vux'
export default {
  directives: {
    TransferDom
  },
  components: {
    XHeader,
    Flexbox,
    FlexboxItem,
    Divider,
    XDialog,
    XButton,
    Group,
    XSwitch
  },
  methods: {
    doShowToast () {
      this.$vux.toast.show({
        text: 'toast'
      })
    }
  },
  data () {
    return {
      show: false,
      show2: false,
      showToast: false,
      showHideOnBlur: false,
      showScrollBox: false,
      showDialogStyle: false
    }
  }
}
</script>  